<template>
  <el-popover placement="top-start" title="完成情况" width="200" trigger="hover">
    <template #reference>
      <el-tag class="tag-company">{{ companyName }}</el-tag>
    </template>
    <div v-if="statisticsData">
      <p>次数： {{ statisticsData.count }}次</p>
      <p>时长： {{ statisticsData.length/3600 }}小时</p>
    </div>
    <div v-else>
      <p>该单位未设置党支部</p>
    </div>
  </el-popover>
</template>

<script>
import { companyDetail } from '@/api/company'
export default {
  name: 'CompanyItem',
  props: {
    data: { type: Object, default: null }
  },
  data: () => ({
    companyName: null,
    statisticsData: null
  }),
  watch: {
    data: {
      handler(val) {
        if (val.self[0]) this.statisticsData = val.self[0]
        this.getCompanyDetail(val.company)
      },
      immediate: true
    }
  },
  methods: {
    getCompanyDetail(val) {
      companyDetail(val).then(data => {
        this.companyName = data.model.name
      })
    }
  }
}
</script>

<style>
.tag-company {
  width: 10rem;
}
</style>
